<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<c:set var="roleStr" value="${sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal.roleStr}"/>
<c:set var="username" value="${sessionScope.SPRING_SECURITY_CONTEXT.authentication.principal.username}"/>
<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <section class="panel">
                <header class="panel-heading">
                    系统设置
                </header>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-6">
                            <aside class="profile-nav alt green-border">
                                <section class="panel">
                                    <div class="user-heading alt green-bg">
                                        <a href="#">
                                            <img alt="" src="static/img/avatar-mini.jpg">
                                        </a>
                                        <h1>${username}</h1>
                                        <p>${roleStr}</p>
                                    </div>
                                </section>
                            </aside>

                            <aside class="profile-nav alt green-border">
                                <section class="panel">
                                    <ul id="settings-list" class="nav nav-pills nav-stacked">

                                    </ul>
                                </section>
                            </aside>
                        </div>

                        <div class="col-lg-6">
                            <div class="form" id="ocean-modal">
                                <form id="setting_form" class="form-horizontal hidden" method="post"
                                      data-url="resources/entity" data-class="com.ocean.core.entity.Setting">
                                    <input type="hidden" id="entity_id" name="id" value="">
                                    <input type="hidden" id="entity_code" name="code" value="">
                                    <div class="form-group">
                                        <label for="entity_value" id="label_name"
                                               class="control-label col-lg-2"></label>
                                        <div class="col-lg-10">
                                            <input class="form-control" id="entity_value" name="value" type="number"
                                                   required/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-lg-offset-2 col-lg-10">
                                            <button class="btn btn-success" type="button"
                                                    onclick="formSubmit(validator)">Save
                                            </button>
                                            <button class="btn btn-default" type="button"
                                                    onclick="$('#setting_form').addClass('hidden')">Cancel
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</section>
<script type="text/template" id="settings-list-template">
    <@ _.each(items, function (item) { @>
    <li>
        <a>
            <i class="icon-bell-alt"></i> <@= item.name @>
            <button class="btn btn-primary btn-xs pull-right r-activity"
                    onclick="doEdit('<@= item.id @>','<@= item.name @>','<@= item.code @>','<@= item.value @>')">
                <i class="icon-pencil"></i>
            </button>
            <span id="<@= item.code @>_value"
                  class="label label-warning pull-right r-activity"
                  style="margin-right: 10px;"><@= item.value @></span>
        </a>
    </li>
    <@ }); @>
</script>
<script type="application/javascript">
    function load() {
        $("#setting_form").addClass('hidden');
        WaitingDialog.show();
        $.post("resources/settings/list", {}, function (data) {
            WaitingDialog.dismiss();
            if (data == null) {
                return;
            }
            var tmpl = _.template($('#settings-list-template').html());
            $('#settings-list').html(tmpl({items: data}));
        });
    }
    load();
    var validator = $("#setting_form").validate();
    function doEdit(id, name, code, value) {
        $("#setting_form").removeClass('hidden');
        $("#entity_id").val(id);
        $("#entity_code").val(code);
        $("#label_name").text(name);
        $("#entity_value").val(value);
    }
</script>